<template>
	<view class="container">
		<u-navbar :autoBack="true"  title="实名认证" placeholder leftIconColor="#fff" bgColor="#0a0816"></u-navbar>

		<!-- 未认证 -->
		<view class="pad-32" v-if="authInfo.status == 1">
			<u--form labelPosition="left" :model="userInfo" ref="form1" labelWidth="160rpx"
				:labelStyle="{fontSize: '28rpx'}">
				<view class="bg-white pad-left-right-24 pad-top-bottom-16 radius24">
					<u-form-item label="真实姓名" borderBottom="true">
						<u--input @blur="hanldeBlurInput" inputAlign="right" type="text" clearable
							placeholderClass="input-style" placeholder="请输入真实姓名" v-model="userInfo.name"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="身份证号" borderBottom="true">
						<u--input @blur="hanldeBlurInput" maxlength="18" inputAlign="right" type="idcard" clearable
							placeholderClass="input-style" placeholder="请输入有效身份证号" v-model="userInfo.id_no"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机号码">
						<u--input disabledColor="#FFFFFF" disabled inputAlign="right" type="text" clearable
							placeholderClass="input-style" placeholder="请输入有效手机号" v-model="info.tel"
							border="none"></u--input>
					</u-form-item>
					<!-- <u-form-item label="银行卡号">
						<u--input disabledColor="#FFFFFF" inputAlign="right" type="text" clearable
							placeholderClass="input-style" placeholder="请输入银行卡号" v-model="userInfo.bankno"
							border="none"></u--input>
					</u-form-item> -->
				</view>
			</u--form>

			<view class="font-24 color-grey mar-top-40 flex">
				<image class="hint" src="../../static/icon/hint.png" mode=""></image>
				<view class="mar-left-20">
					<view>* 实名认证仅限年满18周岁（不含）到60周岁（含）之间的 中国大陆用户</view>
					<view class="mar-top-20">* 您填写的实名认证信息，须和您的注册手机号所绑定的身份信息一致</view>
					<view class="mar-top-20">* 未经您的授权，您的身份信息不会用于其他用途</view>
				</view>
			</view>

			<u-button :customStyle="{border: 0,}" class="mar-top-96 font-32 button bg-theme" :disabled="disabled" shape="circle"
				@click="submit">保存</u-button>
		</view>

		<!-- 认证成功 -->
		<view class="centerXY columnY" v-if="authInfo.status == 2">
			<view class="font-32 pad-top-64 font-w-500 centerY color-white">
				<image class="success" src="../../static/icon/order-success.png"></image>
				<text class="mar-left-16">您已完成认证</text>
			</view>
			<view class="info mar-top-80 pad-48 betweenY">
				<view class="betweenX bottomY start">
					<view>
						<view class="font-24">姓名</view>
						<view class="font-32 mar-top-16">{{authInfo.name}}</view>
					</view>
					<view class="centerY">
						<image class="rzbz" src="../../static/image/has-auth.png"></image>
						<text class="font-24">信息安全保障中</text>
					</view>
				</view>
				<view class="betweenX">
					<view>
						<view class="font-24">身份证</view>
						<view class="font-32 mar-top-16">{{authInfo.id_no}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		baseInfo,
		realNameAuthInfo,
		postRealNameAuth
	} from '@/config/api.js'
	export default {
		data() {
			return {
				authInfo: {},
				userInfo: {},
				info: {},
				disabled: false
			}
		},
		onLoad() {
			this.getRealNameAuthInfo();
		},
		methods: {
			// 获取实名认证&个人信息
			getRealNameAuthInfo() {
				realNameAuthInfo().then(res => {
					this.authInfo = res.data.info;
				})

				baseInfo().then(res => {
					this.info = res.data.info;
				})
			},
			// 鼠标离开事件
			hanldeBlurInput() {
				if (this.userInfo.name != '' && this.userInfo.id_no != '') {
					this.disabled = false;
				} else {
					this.disabled = true;
				}
			},
			// 提交信息
			submit() {
				postRealNameAuth(this.userInfo).then(res => {
					this.getRealNameAuthInfo();
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.button {
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			height: 96rpx;
			color: white;
		}


		::v-deep .u-form-item__body {
			height: 100rpx;
		}

		.info {
			width: 646rpx;
			height: 348rpx;
			background: url('../../static/image/rzCard.png') no-repeat;
			background-size: 100% 100%;
		}

		.success {
			display: block;
			width: 48rpx;
			height: 48rpx;
		}

		.start {
			align-items: flex-start;
		}

		.rzbz {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
	}
	
	.hint{
		display: block;
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
	}
	
	::v-deep .input-style{
		font-size: 28rpx !important;
		color: rgb(192, 196, 204) !important;
	}
	
</style>